<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>自评考核任务列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">

    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link type="text/css" rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/css/base/base.css?20201106.1">

    <script src="/js/common/language.js"></script>

    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/pagination/js/jquery.pagination.min.js"></script>

    <%--<script src="/js/document/makeADraft.js"></script>--%>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <style>

        table tr {
            border-width: 1px;
            border-style: solid;
            border-color: rgb(204, 204, 204);
            border-image: initial;
        }

        table tr th {
            font-size: 13pt;
            color: rgb(47, 92, 143);
            text-align: center;
            padding: 6px;
        }

        table td {
            font-size: 11pt;
            padding: 6px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            word-break: keep-all;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        table tr:nth-child(2n) {
            background-color: rgb(255, 255, 255);
        }

        table tr:nth-child(2n+1) {
            background-color: #F6F7F9;
        }

        .newLeave {
            border-radius: 3px;
            margin-right: 3%;
            float: right;
            width: 70px;
            height: 28px;
            color: #fff;
            font-size: 14px;
            line-height: 28px;
            margin-right: 3%;
            margin-top: 14px;
            cursor: pointer;
            background: #2b7fe0
        }

        .clearfix {
            margin: 5px auto;
            width: 93%;
        }

        textarea.BigStatic {
            font-size: 10pt;
            padding: 1px 5px;
            border: 1px solid #C0BBB4;
            background: #E0E0E0;
            margin-left: 32px;
        }

        .index-desc {
            height: 95px;
            float: left;
            line-height: 95px;
            margin-right: 9px;
        }

        .lab-set {
            height: 50px;
            float: left;
            line-height: 47px;

        }

        #portalName {
            height: 30px;
            margin-right: 16px;
        }

        .li-set p {
            margin: 5px 0 0 103px;
        }

        .M-box3 .active {
            margin: 0px 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color: #fff;
            text-align: center;
            display: inline-block;
        }

        .M-box3 {
            margin-top: 30px;
            position: fixed;
            bottom: 10px;
            right: 60px;
            text-align: center;
        }

        .M-box3 a {
            margin: 0 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            font-size: 12px;
            display: inline-block;
            text-align: center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #333;
            text-decoration: none;
        }

        .jump-ipt {
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            padding: 0;
        }

        .self_input {
            height: 26px;
        }

        .Query {
            width: 70px;
            height: 29px;
            font-family: 'Arial Normal', 'Arial';
            /* font-weight: 400; */
            font-style: normal;
            font-size: 13px;
            /* text-decoration: none; */
            color: #fff;
            /* text-align: center; */
            background: #2b7edf url(../../img/kaohesousuo.png) no-repeat 10px 8px;
            border: none;
            padding-left: 20px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="headTop" id="maintop">
    <div class="headImg">
        <img src="/img/kaoheziping.png" alt="">
    </div>
    <div class="divTitle">
        自评考核任务列表
    </div>
    <%--<input type="submit" value="新建" id="newBtn1" class="btn">--%>
</div>
<div style="height: 60px;width: 97%;padding-left: 28px;margin-top: 50px" class="clearfix">
    <label class="fl clearfix" style="margin-top: 16px;margin-left: 10px;">
        <span class="fl" style="margin-top: 5px;">状态：</span>
        <label class="fl"><select name="status" id="zt">
            <option value="2">全部</option>
            <option value="1">已自评</option>
            <option value="0">未自评</option>
        </select></label>
        <button type="button" class="Query fl">查询</button>
    </label>
</div>

<table style="margin:7px auto;width:95%">
    <thead>
    <tr style="background: none">
        <th>考核项目名称</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="warpBody">

    </tbody>
</table>
<div id="dbgz_page" class="M-box3">

</div>

<script>
    //查询
    $('.Query').click(function () {
        var allow = $("#zt option:selected").val();
        ajaxPageTr.data.scoreSelfFlag = allow;
        ajaxPageTr.page();
    })
    //列表带分页
    function undefindData(data) {
        if (data == undefined) {
            return '';
        } else {
            return data;
        }
    }
    var ajaxPageTr = {
        data: {
            page: 1,//当前处于第几页
            pageSize: 5,//一页显示几条
            useFlag: true,
            scoreSelfFlag: 2
            // computationNumber:null
        },
        page: function () {
            var me = this;
            layer.msg('加载中', {
                icon: 16
                , shade: 0.01
            });
            $('#warpBody').html('');
            $.ajax({
                type: 'get',
                url: '/ScoreFlowLeader/selScoreSelfData',
                dataType: 'json',
                data: me.data,
                success: function (res) {
                    if (res.obj.length) {
                        var str = '';
                        $.each(res.obj, function (index, item) {
                            str += '<tr groupId="' + item.groupId + '" flowId="' + item.flowId + '" selfFlag="' + item.selfFlag + '" isSelfAssessment="'+item.isSelfAssessment+'" status="'+item.status+'" >' +
                                '<td>' + undefindData(item.flowTitle) + '</td>' +
                                '<td>' + function () {
                                    if (item.status != undefined && item.status!=0) {
                                        return '<span>已自评</span>'
                                    } else {
                                        return '<span>未自评</span>'
                                    }
                                }() + '</td>' +
                                '<td>' + '<a href ="javascript:;" class ="ziping">' + function () {
                                    if (item.status != undefined && item.status!=0) {
                                        return '<span>详情</span>'
                                    } else {
                                        return '<span>自评</span>'
                                    }
                                }() + '</a>'+'</td>' + '</tr>';
                        })
                        $('#warpBody').html(str)

                        layer.closeAll();
                        me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
                    } else {
                        layer.msg("暂无数据", {icon: 2})
                    }
                }
            })

        },
        pageTwo: function (totalData, pageSize, indexs) {
            var mes = this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                prevContent:'上一页',
                nextContent:'下一页',
                jump: true,
                coping: true,
                homePage: '',
                endPage: '',
                current: indexs || 1,
                callback: function (index) {
                    mes.data.page = index.getCurrent();
                    mes.page();
                }
            });
        }
    }
    ajaxPageTr.page();
    //自评情况
    $('table').on('click','.ziping',function(){
        var flowId=$(this).parent().parent().attr('flowId');
        var status=$(this).parent().parent().attr('status');
        var type = 1;
        if(status!=undefined&&(status==1||status==2)){
            type = 2;
        }
        window.location.href='/ScoreItemLeader/assessmentziping?flowId='+flowId+'&type='+type;
    });


    $('table').on('click', '.123', function () {
        var groupId = $(this).parent().parent().attr('groupId')
        var flowId = $(this).parent().parent().attr('flowId')
        layer.open({
            type: 1,
            title: ['自评情况', 'background-color:#2b7fe0;color:#fff;'],
            area: ['700px', '350px'],
            shadeClose: false, //点击遮罩关闭
            content: ' <table><thead><tr><th>自评项目</th><th>分数</th><th>自评说明</th></tr></thead><tbody id="bodywarp"></tbody></table>',
            btn: ['保存', '取消'],
            success: function () {
                $.ajax({
                    type: 'get',
                    url: '/ScoreItemLeader/selScoreItem',
                    dataType: 'json',
                    data: {
                        groupId: groupId
                    },
                    success: function (res) {
                        var str = '';
                        $.each(res.obj, function (index, item) {
                            str += '<tr class="kaoheziping" groupId="' + item.groupId + '" itemId="' + item.itemId + '" flowId="' + flowId + '">' +
                                '<td>' + item.itemName + '( ' + '<span class="span1">' + item.min + '</span>' + '-' + '<span class="span2">' + item.max + '</span>' + ')' + '<br> 分值说明：' + item.itemExplain + '</td>' +
                                '<td><input type="text" class="self_input"> </td>' +
                                '<td><textarea id="txt-are" cols="30" rows="2" class="self_txt"></textarea></td>' +
                                '</tr>';

                        })
                        $('#bodywarp').html(str)
                    }
                });
            },
            btn1: function (index) {
                var arr = [];
                var temp = 0;
                $('.kaoheziping').each(function () {
                    var min = parseInt($(this).children().children('.span1').html())
                    var max = parseInt($(this).children().children('.span2').html())
                    var input_val = $(this).children().children('.self_input').val()
                    var self_txt = $(this).children().children('.self_txt').val()
                    var itemId = $(this).attr('itemId')
                    var groupId = $(this).attr('groupId')
                    var flowId = $(this).attr('flowId')
                    var object = {}
                    object.grade = input_val
                    object.explains = self_txt
                    object.itemId = itemId
                    object.groupId = groupId
                    object.flowId = flowId
                    object.selfFlag = 0
                    arr.push(object)
                    if (!(input_val == "")) {
                        if (!(input_val != "" && (input_val < min || input_val > max))) {
                            temp++;

                        } else {
                            layer.msg('分数必须在测试范围内');
                            return false;
                        }
                    } else {
                        layer.msg('录入的分数不能为空');
                        return false;
                    }

                })

                if(temp == $('.kaoheziping').length){
                    $.ajax({
                        type: 'get',
                        url: '/ScoreSelfDataController/saveSelScore',
                        dataType: 'json',
                        data: {
                            jsonStr: JSON.stringify(arr)
                        },
                        success: function (res) {
                            layer.msg("保存成功", {
                                icon: 1,
                                time: 1500 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                location.href = "/ScoreSelfDataController/scoreSelfData"
                            });
                        }
                    })
                }

            }
        })
    });




    //详情
    $('table').on('click', '.xiangqing', function () {
        var groupId = $(this).parent().parent().attr('groupId')
        var flowId = $(this).parent().parent().attr('flowId')
        layer.open({
            type: 1,
            title: ['自评详情', 'background-color:#2b7fe0;color:#fff;'],
            area: ['500px', '350px'],
            shadeClose: false, //点击遮罩关闭
            content: ' <table><thead><tr><th>自评项目</th><th>分数</th><th>自评说明</th></tr></thead><tbody id="bodywarp"></tbody></table>',
            btn: ['取消'],
            success: function () {
                $.ajax({
                    type: 'get',
                    url: '/ScoreSelfDataController/getScoreFlowItemByFlowId',
                    dataType: 'json',
                    data: {
                        groupId: groupId,
                        flowId: flowId,
                        selfFlag:0
                    },
                    success: function (res) {
                         var str='';
                         $.each(res.obj, function (index, item) {
                             str += '<tr class="kaoheziping" groupId="'+item.groupId+'" itemId="'+item.itemId+'" flowId="'+flowId+'">' +
                                 '<td>'+undefindData(item.itemName)+'</td>' +
                                 '<td>'+undefindData(item.grade)+' </td>' +
                                 '<td title="'+undefindData(item.explains) +'">'+undefindData(item.explains)+'</td>' +
                                 '</tr>';

                         })
                         $('#bodywarp').html(str)
                    }
                });
            },
            yes: function (index) {
                layer.close(index);
            }
        })
    });

</script>
</body>
</html>
